<template>
  <ul>
    <li><router-link to="/home">home</router-link></li>
    <li><router-link to="/about">about</router-link></li>
  </ul>
  <!-- 
    插槽 
      v-slot 默认插槽
        v-slot:default  
        #default
      v-slot="{ Component }" 作用域插槽

      v-slot:header 具名插槽
      #header 具名插槽
   -->
  <!-- 
    router-view组件特点：
      1. 如果你没有传递默认插槽，那么就会渲染对应的路由组件
      2. 如果你传递了默认插槽，那么就渲染默认插槽

      Component 就是 router-view 原来想要渲染的路由组件
    -->

  <!-- 
    vue 动态组件
    component是vue的内置元素，本身啥也不渲染
      看is属性的值，is属性的值是啥就渲染啥

    <component :is="Component" /> 就是渲染路由组件
  -->

  <router-view v-slot="{ Component }">
    <transition>
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>

<script lang="ts" setup></script>

<style scoped>
/* 从显示到隐藏 leave */
/* .v-leave-from {
}
.v-leave-active {
}
.v-leave-to {
} */
/* 从隐藏到显示 enter */

.v-enter-from {
  opacity: 0;
}
.v-enter-active {
  transition: opacity 1s;
}
.v-enter-to {
  opacity: 1;
}
</style>
